<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--图片
src：图片的路径 在生产环境中要使用相对路径来拼凑成绝对路径的方式
alt：当图片能找到并显示的时候 alt不显示 如果图片不显示 alt生效
  原生html中所有能改变内容效果的 都不用 全部放在CSS中实现
title：当鼠标悬停的时候 显示的内容
-->
<img src="1.png" alt="标题" width="100" title="图片"/>

<div >
  <img
      src="1.png"
      alt="The head and torso of a dinosaur skeleton;
        it has a large head with long sharp teeth"
      width="400"
      height="341" />

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

<!--专门用于将图片和文字进行关联的语义化容器-->
<figure>
  <img
      src="1.png"
      alt="The head and torso of a dinosaur skeleton;
        it has a large head with long sharp teeth"
      width="400"
      height="341" />
  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>




</body>
</html>